/* 日志的容器 */
import { useState } from "react";
import Card from "../UI/Card/Card";
import LogFilter from "./LogFilter/LogFilter";
import LogItem from "./LogItem/LogItem";
import "./Logs.css";

const Logs = (props) => {
  //过滤数据只显示某一年的数据
  //定义sate
  let [year, setYear] = useState(2022);
  let changeHandler = (year) => {
    console.log('year',year)
    setYear(year);
  }
  let filterData = props.logsData.filter(
    (item) => item.date.getFullYear() === year
  );
  console.log("filterData", filterData);

  // 将数据放入JSX中
  const logItemData = filterData.map((item, index) => (
    <LogItem
      onDeleteLog={() => props.onDeleteLog(item.id)}
      key={item.id}
      date={item.date}
      desc={item.desc}
      time={item.time}
    />
    // 直接用闭包把index用匿名函数给闭过去到App里
  ));

  return (
    <Card className="logs">
      <LogFilter year={year} change={changeHandler } />
      {logItemData.length !== 0 ? (
        logItemData
      ) : (
        <p className="noLog">列表中没有日志信息</p>
      )}
    </Card>
  );
};

export default Logs;
